<template>
  <div class="cim-imgViewer">
    <img
      v-if="src"
      :src="src"
      :style="{ width, height }"
      class="cim-imgViewer__img"
      @click="view = true"
    />

    <viewer
      v-if="view"
      :view.sync="view"
      :previewSrcList="previewSrcList"
      :previewIndex="previewIndex"
      :showFlag="showFlag"
      :selfDefineWidth="selfDefineWidth"
      :selfDefineHeight="selfDefineHeight"
      @update:showFlag="handleChangeShowFlag"
    ></viewer>
  </div>
</template>

<script>
import '../../../styles/img-viewer.less'
import Viewer from './viewer'

export default {
  name: 'CimImageViewer',
  components: {
    Viewer
  },
  props: {
    width: {
      type: String,
      default: 'auto'
    },
    height: {
      type: String,
      default: 'auto'
    },
    selfDefineWidth: {
      type: String,
      default: 'auto'
    },
    selfDefineHeight: {
      type: String,
      default: 'auto'
    },
    src: {
      type: String,
      default: ''
    },
    previewSrcList: {
      type: Array,
      default: () => []
    },
    baseTop: {
      type: Number,
      default: 70
    },
    baseLeft: {
      type: Number,
      default: 0
    },
    showFlag: {
      type: Boolean,
      default: false
    },
    currentShowImgIdx: {
      type: Number,
      default: -1
    }
  },
  data () {
    return {
      view: false,
      previewIndex: 0
    }
  },
  watch: {
    showFlag: {
      handler (val) {
        val ? (this.view = true) : (this.view = false)
      },
      deep: true
    }
  },
  provide () {
    return {
      previewSrcList: this.previewSrcList,
      baseTop: this.baseTop,
      baseLeft: this.baseLeft
    }
  },
  methods: {
    show (index = 0) {
      this.previewIndex = index
      this.view = true
    },
    handleChangeShowFlag (flag) {
      this.$emit('update:showFlag', flag)
    }
  }
}
</script>
